<template>
  <van-popup v-model="cVisible">
    <div>
      <van-field v-model="form.model" label="型号" placeholder="请输入型号" />
      <van-field v-model="form.quantity" label="数量（套）" placeholder="请输入数量（套）" />
      <van-field v-model="form.price" label="价格" type="number" placeholder="请输入价格" />
      <van-field
        readonly
        clickable
        name="estimateInstallYear"
        :value="form.estimateInstallYear"
        label="预计安装年份"
        placeholder="点击选择预计安装年份"
        @click="showYearPicker = true"
      />
      <van-popup v-model="showYearPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="yearArr"
          @confirm="yearConfirm"
          @cancel="showYearPicker = false"
        />
      </van-popup>
    </div>
  </van-popup>
</template>

<script>
import { Field, Popup, Picker } from "vant";
export default {
  components: {
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup
  },
  props: {
    detail: {
      type: Object,
      default: () => {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: "添加项目报备",
      cVisible: false,
      form: {
        model: "",
        quantity: "",
        price: "",
        estimateInstallYear: "",
        estimateInstallMonth: "",
        remark: ""
      },
      showYearPicker: false,
      yearArr: () => {
        let arr = [];
        for (let i = 2000; i < 2101; i++) {
          arr.push(i);
        }
        return arr;
      },
      monthArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    };
  },
  watch: {
    visible: {
      handler: function(value) {
        this.cVisible = value;
      }
    }
  },
  methods: {
    yearConfirm(value) {
      this.form.estimateInstallYear = value;
    }
  }
};
</script>

<style>
</style>